<template>
	<view class="top">
		<view class="top_left" @click="onCiNavigator"><uni-icons type="back" size="45rpx" color="black"></uni-icons>
		</view>
		<view class="top_center">我的收藏</view>
	</view>
	<view class="tabs">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="rgb(62, 211, 45)" class="titleNav"></uni-segmented-control>
		<view class="content">
			<!-- 第一个模块 -->
			<view v-show="current === 0">
				<view class="desc" v-for="item in item">
					<image :src="item.img" mode="" class="img"></image>
					<view class="rht">
						<view class="">
							<h5>{{item.title}}</h5>
							<view class="price">
								{{item.price}}元起
							</view>
						</view>
						<view class="content-wrapper" :class="{ 'is-collected': isCollected }" @click="toggleCollect">
							<uni-icons type="heart" size="30" color="#777" v-show="!isCollected"></uni-icons>
							<span>{{ isCollected ? '已收藏' : '收藏' }}</span>
						</view>
					</view>

				</view>
			</view>
			<!-- 模块二 -->
			<view v-show="current === 1">
				<view class="desc" v-for="item in shopping">
					<image :src="item.img" mode="" class="img"></image>
					<view class="rht">
						<view class="">
							<h5>{{item.title}}</h5>
							<view class="price">
								{{item.price}}元起
							</view>
						</view>
						<view class="content-wrapper" :class="{ 'is-collected': isCollected }" @click="toggleCollect">
							<uni-icons type="heart" size="30" color="#777" v-show="!isCollected"></uni-icons>
							<span>{{ isCollected ? '已收藏' : '收藏' }}</span>
						</view>
					</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['服务收藏', '商品收藏'],
				current: 0,
				item: [{
						img: "../../static/img/qa.png",
						title: "厨房全套清洗",
						price: 59
					},

				],
				shopping: [{
						img: "../../static/img/release.png",
						title: "清洗器清洗器",
						price: 59
					},

				],
				isCollected: false // 标记当前文章是否被收藏

			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			toggleCollect() {
				// 判断当前是否已经被收藏，如果已被收藏，则移除，否则添加
				this.isCollected = !this.isCollected

				if (this.isCollected) {
					// 添加到收藏列表
					// ...
				} else {
					// 从收藏列表中移除
					// ...
				}
			}
		}
	}
</script>

<style lang="less">
	.top {
		width: 100%;
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 10rpx 20rpx;
		position: sticky;
		top: 0;
		border-bottom: 1rpx solid white;
	}

	.top_center {
		margin-left: 32%;
	}

	.content-wrapper {
		display: flex;
		align-items: center;
		color: #333;
	}

	/* 收藏状态时设置 */
	.content-wrapper.is-collected .icon-collect {
		color: tomato;
	}

	.content-wrapper.is-collected span {
		color: tomato;
	}

	.desc {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		background-color: rgb(246, 246, 246);
		padding: 20rpx;
		border-radius: 40rpx;

		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}

		.rht {
			vertical-align: top;
			width: 65%;
			display: inline-block;
			margin-left: 10rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
		}

		.price {
			margin-top: 70rpx;
			color: rgb(249, 155, 43);
			font-size: 30rpx;
			// font-weight: bolder;

		}
	}

	/*  */
</style>